<script type="text/html" data-template-name="rdb-operation">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
        <div style="display: inline-block; width: calc(100% - 105px)">
            <input type="text" id="node-input-name"
                   data-i18n="[placeholder]common.label.name">
        </div>
    </div>
    <div class="form-row">
        <label for="node-input-datasourceId"><i class="fa fa-archive"></i> <span
                data-i18n="rdb.label.datasourceId"></span></label>
        <div style="display: inline-block; width: calc(100% - 105px)">
            <select id="node-input-datasourceId">

            </select>
        </div>
    </div>
    <div class="form-row">
        <label for="node-input-table"><i class="fa fa-group"></i> <span data-i18n="rdb.label.table"></span></label>
        <div style="display: inline-block; width: calc(100% - 105px)">
            <select id="node-input-table">

            </select>
        </div>
    </div>
    <div class="form-row">
        <label for="node-input-buffer"><i class="fa fa-flag"></i> <span data-i18n="rdb.label.buffer"></span></label>
        <div style="display: inline-block; width: calc(100% - 105px)">
            <input type="text" id="node-input-buffer">
        </div>
    </div>
    <div class="form-row">
        <label for="node-input-bufferTimeout"><i class="fa fa-file-text"></i> <span
                data-i18n="rdb.label.bufferTimeout"></span></label>
        <div style="display: inline-block; width: calc(100% - 105px)">
            <input type="text" id="node-input-bufferTimeout">
        </div>
    </div>

    <div class="form-row var-container">

    </div>



</script>

<script type="text/javascript">
    RED.nodes.registerType('rdb-operation', {
        color: "#df7f2c",
        category: 'storage',
        name:"写入数据库",
        defaults: {
            datasourceId: {value: "", required: true},
            table: {value: "", required: true},
            buffer: {value: "200", required: true},
            bufferTimeout: {value: "2s", required: true},
            name: {value: ""}
        },
        inputs: 1,
        outputs: 0,
        icon: "db.svg",
        oneditsave:function (){
            me.changed=true;
        },
        label: function () {
            return this.name || "写入数据库";
        },
        labelStyle: function () {
            return this.name ? "node_label_italic" : "";
        },
        oneditprepare: function () {
            var me = this;
            var datasourceId = $("#node-input-datasourceId");
            var table = $("#node-input-table");

            var templates={};

            datasourceId.on("change", function () {
                me.datasourceId=datasourceId.val();
                loadTables();
            });

            table.on("change", function () {

            });

            function loadTables() {
                if(!me.datasourceId){
                    return
                }
                table.html("");
                $.ajax({
                    url: RED.settings.apiBaseUrl +
                        "/datasource/rdb/"+me.datasourceId+"/tables?includeColumns=false"
                }).then(function (response) {
                    if (response.result) {
                        $(response.result).each(function () {
                            table.append($("<option>").val(this.name).text(this.name))
                        });
                        table.val(me.table);
                    }
                })
            }

            $.ajax({
                url: RED.settings.apiBaseUrl +
                    "/datasource/config/_query/no-paging?includes=id,name&paging=false&where=typeId=rdb and state=enabled"
            }).then(function (response) {
                if (response.result) {
                    $(response.result).each(function () {
                        datasourceId.append($("<option>").val(this.id).text(this.name))
                    });
                    if(me.datasourceId){
                        datasourceId.val(me.datasourceId);
                    }
                    datasourceId.trigger("change")
                }

            })
        },
        oneditsave:function (){

        }
    });
</script>
